<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="shortcut icon" href="#" />
    <link rel="stylesheet" type="text/css" href="{{pluResPath}}html/ledger/ledger.css" />
    <link rel="preload" href="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js" as="script" />
    <link rel="preload" href="{{resPath}}/font/tttgbnumber.ttf" as="font">
    <link rel="preload" href="{{pluResPath}}img/other/bg.webp" as="image">
    <link rel="preload" href="{{pluResPath}}img/other/chart.png" as="image">
  </head>

  <body>
    <div class="container" id="container">
      <div class="title-box">
        <div class="info">
          <div class="uid">ID：{{uid}}</div>
          <div class="month">{{day}}札记</div>
        </div>
        <img class="genshin_logo" src="{{pluResPath}}img/other/原神.png" />
      </div>
      <div class="data-box">
        <div class="month">
          <div class="head">当月获取：</div>
          <div class="primogems">
            <div class="icon-ys"></div>
            <div class="text">原石：{{month_data.current_primogems}} | {{month_data.gacha}} 抽</div>
          </div>
          <div class="primogems">
            <div class="icon-mola"></div>
            <div class="text">摩拉：{{month_data.current_mora}}</div>
          </div>
        </div>
        <div class="day">
          <div class="head">上月获取：</div>
          <div class="primogems">
            <div class="icon-ys"></div>
            <div class="text">原石：{{month_data.last_primogems}} | {{month_data.last_gacha}} 抽</div>
          </div>
          <div class="primogems">
            <div class="icon-mola"></div>
            <div class="text">摩拉：{{month_data.last_mora}}</div>
          </div>
        </div>
      </div>
      <div class="chart-box">
        <div class="head">原石收入组成：</div>
        <div class="chart-info">
          <div id="chartContainer"></div>
          <ul class="tooltip">
            {{each month_data.group_by val}}
            <li>
              <i style="background: {{val.color}}"></i>
              <span class="action">{{val.action}}</span> <em>{{val.percent}}%</em><span class="num">{{val.num}}</span>
            </li>
            {{/each}}
          </ul>
        </div>
      </div>
    </div>
  </body>

  <script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
  <script>
    const { Pie } = G2Plot;
    const data = JSON.parse(`{{@ group_by}}`);
    const piePlot = new Pie("chartContainer", {
      renderer: "svg",
      animation: false,
      data: data,
      appendPadding: 10,
      angleField: "num",
      colorField: "action",
      radius: 1,
      innerRadius: 0.7,
      color: JSON.parse(`{{@ color}}`),
      meta: {
        // num: {
        //   formatter: (v) => `${v}`,
        // },
      },
      label: {
        type: "inner",
        offset: "-50%",
        autoRotate: false,
        style: {
          textAlign: "center",
          fontFamily: "tttgbnumber",
        },
        formatter: ({ percent }) => {
          percent = (percent * 100).toFixed(0);
          return percent > 2 ? `${percent}%` : "";
        },
      },
      statistic: {
        title: {
          offsetY: -18,
          content: "总计",
        },
        content: {
          offsetY: -10,
          style: {
            fontFamily: "tttgbnumber",
          },
        },
      },
      legend:false,
    });
    piePlot.render();
  </script>
</html>
